<template>
	<view class="container">
		<view style="padding: 30rpx;background-color: #EED146;">
			<view class="font-size-base11"><u-icon class="mr-10" name='bell' size="28"></u-icon>  安全提醒：切勿相信任何交钱刷单的合作！</view>
		</view>
		
		<view class="p-30">	
		<view class="p-30 bg-white mb-20 section border-radius-base address">
			<view class="font-size-lg font-weight-bold mb-30 title">任务介绍</view>
			<view>任务标题：{{task.title}}</view>
			<view>任务奖励：{{task.reward_label}}</view>
		</view>
			<view class="p-30 bg-white mb-20 section border-radius-base address">
				<view class="font-size-lg font-weight-bold mb-30 title">请输入报名介绍</view>
				<textarea v-model="introduce" type="text" placeholder-class="line" placeholder="请输入报名介绍～" />
			</view>
			<view class="p-30 bg-white mb-40 section border-radius-base">
				<view class="mb-20 title d-flex justify-content-between">
					<view class='font-size-lg font-weight-bold'>我的联系方式 <text class="text-color-assist font-size-sm ml-20 font-weight-normal">(确保准确)</text> </view>
					<view class="text-color-primary" @tap="editContact"><u-icon class='mr-10' name='edit-pen'></u-icon>修改</view>
				</view>
				<view class="mb-10 d-flex" v-if="task.need==1||task.need==2">
					<view class="mr-20 text-color-assist" style="width: 120rpx;">收货人:</view>
					<view>{{contact.name}}</view>
				</view>
				<view class="mb-10 d-flex" v-if="task.need==1||task.need==2">
					<view class="mr-20 text-color-assist flex-nowrap" style="width: 120rpx;">收货地址:</view>
					<view>{{contact.province}}{{contact.city}}{{contact.area}}{{contact.address}}</view>
				</view>
				<view class="mb-10 d-flex">
					<view class="mr-20 text-color-assist" style="width: 120rpx;">手机号:</view>
					<view>{{contact.mobile}}</view>
				</view>
				<view class="mb-10 d-flex">
					<view class="mr-20 text-color-assist" style="width: 120rpx;">微信号:</view>
					<view>{{contact.wechat_no}}</view>
				</view>
				<!-- <view class="mb-10 d-flex">
					<view class="mr-20 text-color-assist flex-shrink-0" style="width: 120rpx;">收货地址:</view>
					<view>{{contact.province}} {{contact.city}} {{contact.area}} {{contact.address}}</view>
				</view> -->
			</view>
			<view class="font-size-base" style="color: #9A9A9A;">
				<view class="mb-10">温馨提示：</view>
				<view class="mb-10">1.平台禁止一切网店刷单操作。</view>
				<view class="mb-10">2.平台禁止一切色情私房拍照。</view>
				<view class="mb-10">3.切勿私下缴纳费用或定金的合作，发生经济纠纷小程序概不负责。</view>
			</view>
		</view>
		<!--  end -->
		<view class="sign-up-footer d-flex justify-content-between align-items-center">
			<button type="primary" @tap='signUp'>提交报名</button>
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			introduce:''
		}
	},
	computed:{
		...mapState(['hasLogin', 'userInfo', 'contact', 'task']),
	},
	methods:{
		...mapMutations(['setTask']),
		signUp() {
			if(!this.introduce) {
				this.$u.toast('报名介绍不能为空！'); return;
			}
			
			if(!this.contact) {
				this.$u.toast('联系方式不能为空！');return;
			}
			
			if(this.task.need==1||this.task.need==2) {
				if(!this.contact.name) {
					this.$u.toast('联系收货人不能为空！');return;
				}
				if(!this.contact.province) {
					this.$u.toast('联系收货地区不能为空！');return;
				}
				
				if(!this.contact.address) {
					this.$u.toast('联系收货地址不能为空！');return;
				}
			}
		
			if(!this.contact.mobile) {
				this.$u.toast('联系方式不能为空！'); return;
			}
			
			if(!this.contact.wechat_no) {
				this.$u.toast('联系微信号不能为空！'); return;
			}

			let that = this;
			uni.showModal({
				title: '提示',
				content: '确认报名？',
				confirmText:'确认',
				success (res) {
					if (res.confirm) {
						uni.showLoading({
							mask: true,
							title: '报名中...'
						});
						uni.navigateTo({
							url:"/pages/jump/jump?txt=报名成功"
						})
						uni.hideLoading();
					}
				}
			})
		},
		editContact() {
			uni.navigateTo({
				url:"/pages/my/contact"
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		padding-bottom: 120rpx;
	}	
	.section {
		box-sizing: border-box;
		
		textarea {
			background-color: #f7f7f7;
			padding: 30rpx;
			width: 100%;
			height: 200rpx;
		}
	}
	
	.user-item {
		display: flex;
		justify-content: center; // 内容自适应：上下居中
		align-items: center; // 子项对齐方式：左右居中
		
		.user-item-user {
			flex: 1;
			
			.cxplain {
				color: #999;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
		
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	
	.sign-up-footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background-color: #FFFFFF;
		z-index: 10;
		padding: 20rpx 10rpx;
		
		button {
			height: 100%;
			width: 100%;
			border-radius: 100rpx !important;
			padding: 0 80rpx;
		}
	}
</style>
